<html>
   <head>
      <script type="text/javascript" src="js/namespace.js"></script>
      <script type="text/javascript" src="js/value_manipulation.js"></script>
      <script type="text/javascript" src="js/user_data.js"></script>
      <script type="text/javascript" src="js/urls.js"></script>
      <script type="text/javascript" src="js/state_controller.js"></script>
      <script type="text/javascript">
var hw = {};

function restoreScrollTop() 
{
   sendUserInput();
   // Get the current window's selected tab
   
   chrome.tabs.getSelected(
      null, 
      function( tab )
      {
         chrome.tabs.executeScript( null,
                                   {file: "setPositionScript.js", allFrames: true } );
  
      }
   );
}

function saveScrollTop()
{
   sendUserInput();   
   chrome.tabs.getSelected(
      null, 
      function( tab )
      {
         chrome.tabs.executeScript( null,
                                   {file: "getPositionScript.js", allFrames: true } );
  
      }
   );
}

chrome.windows.getCurrent( 
   addWindowProperties
);

function addWindowProperties( w )
{
   hw.w = w.width;
   hw.h = w.height;
   hw.i = w.id;
}

      </script>
   </head>
   <body onload="showSubmit();">
      <span id="credentials">
         <form id="keepopriel_document_form" onsubmit="showSubmit()">
            <table>
               <tr>
                  <!-- size is a fast and dirty way of keeping both states the same width -->
                  <td>Username:&nbsp;</td><td><input type="text" name="user" value="1" size="25"/></td>
               </tr>
               <tr>
                  <td>Password:&nbsp;</td><td><input type="text" name="pass" value="1" size="25"/></td>
               </tr>
            </table>
         </form>
         <a href="javascript:void(0);" id="setCreds" onclick="showSubmit()">Set Credentials</a>
      </span>
      <span id="choices">
         <table>
            <tr>
               <form id="bookmarkID">
                  <td>Bookmark&nbsp;name:</td><td><input type="text" name="mark" value="A" /></td>
               </form>
            </tr>
            <tr>
               <td><a href="javascript:void(0);" id="restore" onclick="restoreScrollTop()">restore my place</a></td>
               <td><a href="javascript:void(0);" id="save"    onclick="saveScrollTop()">save my place</a></td>            
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
               <td><a href="javascript:void(0);" id="goBack" onclick="showCredentials()">go back</a></td>
            </tr>
         </span>
      </div>
   </body>
</html>
